---
title: Native iframe lazy-loading, modern CSS layouts, and more
subhead: Read our July 2020 Newsletter for the latest news, updates, and stories for developers!
date: 2020-07-30
thumbnail: image/admin/gYfaAJ0Qng572rEAiKjZ.jpg
alt: Browser-level native lazy-loading for iframes is here
---

<!doctype html public "- / /w3c / /dtd xhtml 1.0 transitional / /en" "http: / /www.w3.org /tr /xhtml1 /dtd /xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Web Vitals and web.dev LIVE updates</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="no index">
<!--[if mso | ie]>
<style>
.out-pad-t-20 {
padding-top: 20px !important;
}
.nolineheight{
line-height:19px !important;
}
.nolineheight_2{
line-height:17px !important;
}
</style>
<![endif]-->
<!--[if ie]>
<style>
.sup {
vertical-align: 6px !important;
font-size: 80% !important;
}
.show_mob
{
mso-hide: all !important;
}
</style>
<![endif]-->
<style>
body {
font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000000;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased !important;
-ms-text-size-adjust: none !important;
}
table, tr, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
a:link, a:visited, a:hover, a:active {
color: #4285f4;
text-decoration: none;
}
.appleLinks a {
color: #000000 !important;
text-decoration: none !important;
}
strong {
font-weight: bold !important;
}
em {
font-style: italic !important;
}
.yshortcuts a span {
color: inherit !important;
border-bottom: none !important;
}
html {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: 100%;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%
}
td {
-webkit-text-size-adjust: none;
}
a[href^=tel] {
color: inherit;
text-decoration: none;
}
.mob-hide {
display: none !important;
}
div, p, a, li, td {
-webkit-text-size-adjust: none;
}
td {
text-decoration: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
@media all and (max-width: 600px ){
.table-main-gmail { /* Forces Gmail to display Desktop view */
width: 100% !important;
max-width: 600 !important;
}
.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
width: 100% !important;
max-width: 600px !important;
}
.logo115 {
width: 115px !important;
}
.logopadd {
padding-top: 19px !important;
padding-bottom: 19px !important;
}
.logoright {
padding-top: 24px !important;
}
.hide {
display: none !important;
}
.block {
display: block !important;
}
.text {
text-align: center !important;
}
.wid200 {
width: 200px !important;
}
.mrg {
margin: 0 auto !important;
}
.padR {
padding-right: 0px !important;
}
.fl {
float: left !important;
}
.padtop20 {
padding-right: 0px !important;
padding-bottom: 20px !important;
padding-top: 20px !important;
}
.padtop13 {
padding-top: 13px !important;
padding-bottom: 21px !important;
}
.padtop8 {
padding-top: 8px !important;
}
.font32{
font-size: 32px !important;
line-height: 46px !important;
}
.font32_36{
font-size: 32px !important;
line-height: 36px !important;
}
.pad27{
padding-top: 29px !important;
}
.padtopB20 {
padding-top: 20px !important;
padding-bottom: 29px !important;
}
.padtop24 {
padding-top: 24px !important;
}
.padtop20_t {
padding-top: 20px !important;
}
.padtopB28 {
padding-top: 28px !important;
padding-bottom: 20px !important;
}
.pad-l-r-20 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.pad23B{
padding-bottom: 23px !important;
}
.padtop8{
padding-top: 8px !important;
}
.padwhitebox{
padding: 27px 15px 21px 15px !important;
}
.heig{
height: auto !important;
}
.centertext{text-align: center !important;}
.sign{
padding-top: 36px !important;
padding-bottom: 33px !important;
}
.width174{
width: 174px !important;
}
.pad0{
padding-left: 0px !important;
padding-right: 0px !important;
}
.line18{
line-height: 18px !important;
}
.padtop14{
padding-top: 14px !important;
}
.width108{
width: 108px !important;
}
.padtop39{
padding-top: 39px !important;
}
.padtop9{
padding-top: 9px !important;
}
.imgcenter{
margin: 0 auto !important;
text-align: center !important;
}
}
</style>
</head>
<body style="margin: 0 auto; padding: 0px; bgcolor:#ffffff" bgcolor="#ffffff">
<!-- goto action start here -->
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
<!-- link here -->
<link itemprop="url" href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyUDlw2SYLzDPDZ7gI5j72N7kj9E3-DBMurPP_0eLDIStwNNeFvljTHWxPE-vKUnIRo2ilEldB2xwOsZnpDlqeRFg">
<!-- content here -->
<meta itemprop="name" content="Open web.dev">
</div>
<!-- content here -->
<meta itemprop="description" content="Open web.dev">
</div>
<!-- goto action end here -->
<!--Preview starts here-->
<p style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;" align="center">web.dev LIVE videos and more updates</p>
<!--Preview ends here-->
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top"><!--[if !mso]><!-->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" style="max-width: 850px; width: 100%" class="table-main-gmail pad-l-r-20" align="center">
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
<![endif]-->
<tr>
<td align="center" valign="top" bgcolor="#ffffff"><table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">

<!--Logo section starts here-->
<tr>
<td align="center" class="logobor" valign="top" style="border-bottom: 1px solid #9AA0A6;" width="100%;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2">
<tr>
<td class="" align="left" valign="top"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td aria-hidden="true" align="left" valign="top" class="logo115 logopadd" width="150" height="auto" style="padding-top: 22px; padding-bottom: 23px;"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyNFp8W8mMLPdiHWzdDTidPYksblM5kVlXUG6wJb8CB-m-i6iLycgc6YgrZoi0_2qO9Or8" target="_blank" style="text-decoration: none;"> <img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="150" height="auto" class="logo115" alt="" title="web.dev"></a></td>
</tr>
</table></td>
<td align="right" valign="top"><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="right" style="vertical-align:top;">
<tr>
<td align="right" class="logoright" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:15px; mso-line-height-rule: exactly; padding:29px 0px 21px 0px;">July 2020</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!--Logo section ends here-->
<!--Hero section starts here-->
<tr>
<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
<tbody>
<tr>
<!--Hero section Dekstop View Start-->
<td align="left" valign="top" style="padding-top: 23px; padding-bottom: 22px;" class="hide"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="middle" width="300"><table role="presentation" border="0" cellspacing="0" cellpadding="0" style="vertical-align: middle;">
<tbody>
<tr>
<td class="pad0" align="left" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 40px;">The latest news, techniques, and stories for web developers.</td>
</tr>
</tbody>
</table></td>
<td align="right" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td aria-hidden="true" align="right" valign="top"><a href="#" style="display: block; width: 300px; text-decoration: none;" target="_blank"><img src="https://services.google.com/fh/files/emails/wevdev-hero-img-desktop.png" width="300" alt="" title=""></a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
<!--Hero section Dekstop View Ends-->
<!--Hero section Mobile View Start-->
<!--[if !mso]><!-->
<td align="center" valign="top" style="display: none; padding-top: 29px; padding-bottom: 30px;" class="block"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td aria-hidden="true" align="center" valign="top">
<a href="#" style="text-decoration: none;" target="_blank">
<img src="https://services.google.com/fh/files/emails/wevdev-hero-img-mobile.png" width="300" alt="" title="" title="">
</a>
</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="center" valign="top" width="300"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-top: 22px;">The latest news, techniques, and stories for web developers.</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
<!--<![endif]-->
<!--Hero section Mobile View Ends-->
</tr>
</tbody>
</table></td>
</tr>
<!--Hero section ends here-->
</tbody>
</table></td>
</tr>
<!--Upcoming event section starts here-->
<tr>
<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
<tbody>
<tr>
<td class="font32 pad27" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 6px; padding-top: 38px;"><a href="#" style="text-decoration: none; pointer-events: none; cursor: default; color: #202124;">web.dev</a> LIVE</td>
</tr>
<!--Left side image and Right side Text section starts here-->
<tr>
<td class="padtopB20 centertext" align="center" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" align="center"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
<tr>
<td align="center" class="centertext" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;">All session videos, now available on demand</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" class="padR padtop20_t centertext" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">During our three-day digital event earlier this month, over 33,000 developers joined us across the world to celebrate the community&#39;s actions in these difficult times, learn modern web techniques, and connect with each other. Each day brought unique content on topics such as <strong>Web Vitals, PWAs,</strong> and <strong>Google’s privacy updates</strong>.</td>
</tr>
<tr>
<td valign="top" align="center" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
<tr>
<td aria-hidden="true" align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="http://web.dev/live" style=" color:#202124; text-decoration:none;" target="_blank">Watch all videos</a></td>
<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="http://web.dev/live" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<!--Upcoming event section ends here-->
<!--Featured posts section starts here-->
<tr>
<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
<tbody>
<tr>
<td class="font32 pad27" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 6px; padding-top: 38px;">Launches and updates</td>
</tr>
<!--Left side image and Right side Text section starts here-->
<tr>
<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" class="text"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
<tbody>
<tr>
<td aria-hidden="true" valign="top"><a href="https://web.dev/introducing-tooling-report/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/webdev_july_newsletter_image_1.jpg" width="273" alt="" title="" style="display: block;" class="imgcenter"></a></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;">
<tbody>
<tr>
<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
<tbody>
<tr>
<td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">LAUNCH</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Choose the best build tool for your project with tooling.report</td>
</tr>
<tr>
<td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Select and configure build tools based on best practices.</td>
</tr>
<tr>
<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
<tr>
<td aria-hidden="true" align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/introducing-tooling-report/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/introducing-tooling-report/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<!--Left side image and Right side Text section ends here-->
<!--Left side text and Right side image section starts here-->
<tr>
<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl">
<tbody>
<tr>
<td valign="top" class="text" style="padding-top: 2px;"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
<tbody>
<tr>
<td aria-hidden="true" valign="top"><a href="https://web.dev/one-line-layouts/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/webdev_july_newsletter_image_2.png" width="273" alt="" title="" style="display: block;" class="imgcenter"></a></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-right: 20px;"><![endif]-->
<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;" dir="ltr">
<tbody>
<tr>
<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
<tbody>
<tr>
<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Ten modern layouts in one line of CSS</td>
</tr>
<tr>
<td class="padR" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">A few powerful lines of CSS to help you build robust modern layouts.</td>
</tr>
<tr>
<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
<tr>
<td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/one-line-layouts/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/one-line-layouts/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<!--Left side text and Right side image section ends here-->
<!--Left side image and Right side Text section starts here-->
<tr>
<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px;border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" class="text"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
<tbody>
<tr>
<td aria-hidden="true" valign="top"><a href="https://web.dev/iframe-lazy-loading/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/lazy_load_webdev_image_updtaed.jpg" width="273" alt="" title="" style="display: block;" class="imgcenter"></a></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;">
<tbody>
<tr>
<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
<tbody>
<tr>
<td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">It&#39;s time to lazy-load offscreen iframes</td>
</tr>
<tr>
<td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Browser-level native lazy-loading for iframes is here.</td>
</tr>
<tr>
<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
<tr>
<td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/iframe-lazy-loading/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/iframe-lazy-loading/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<!--Left side image and Right side Text section ends here-->
</tbody>
</table></td>
</tr>
<!--Featured posts section ends here-->
<!-- Signature Starts here-->
<tr>
<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
<!-- Sign off content Start -->
<tr>
<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly;">
Stay safe &amp; see you online,
</td>
</tr>
<!-- Sign off content End -->
<!-- Signature content Start -->
<tr>
<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; font-weight: 500;"><a href="#" style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
</tr>
<!-- Signature content End -->
</table></td>
</tr>
<!-- Signature Ends here-->
<!-- Stars and Social icon Starts here-->
<tr>
<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
<tr>
<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
<!-- Social icon heading Start -->
<tr>
<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect with us</td>
</tr>
<!-- Social icon heading Ends -->
<tr>
<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<!-- Social icon Start -->
<td width="28px" align="center"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExQQ4eNgzlwsxE9KU2NIatxfhbICsG8nkXIB9MU6ENIfetXd5zmm7BH2hoGKkbs_knRyG_d7f25fEBC0sFwhdLbnoiv_6oqdOugZf1FvNc6GcF1V3nTHr4ksQ" target="_blank" style="text-decoration:none">
<img src="https://services.google.com/fh/files/emails/webdev-twitter-icon.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
</td>
<td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
<td width="29px" align="center"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExEByt_fZw-fr-GNyyd0Pgl_QEekFd_GeBaC_khJXU3yh6wTp4Wn4YlarUNpNYN4ZGmnxBDJSjMKGPeGaBCXwQutLmkMlLMiTyWjmX3Rs-8BxZpCu_HflF_h9lLKxKG_vSAhk5LRFU" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-youtube-icon.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
<td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
<td width="28px" align="center"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExk3rn0i8CjNqp8qXu6_NYw7IQgcYK-14lqtpupNPL9-7Sxw7SYH6lNrreTl7qizFI2XhIV99cFrrSo8o4VWsC2BhOTJB1lzXLF3cSsTAjEUV95aLjDWn4" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-github-icon.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
</tr>
<!-- Social icon Ends -->
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
<!-- Stars icon heading Start -->
<tr>
<td class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Did you find this <span class="block"></span>newsletter useful?</td>
</tr>
<!-- Stars icon heading End -->
<tr>
<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- Stars icon Start -->
<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExcz2mNYRfkt4lSPC7oDvZv6SIT3lnzPBKn_R9fwSokPwRBcCEiOT-i3z67CjTkQHacDGNVvHiLEjFML8Xw4N-HujMrZ922ut8o60RctWJ0vuBCg3s" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEwkNxiot8QoRP-J3HmTpqKFTQgHfzD6pPO8pm2GsPmCb_qJR8u2872YsaIkC5XTP-wsz8pMvCDh1sYyFAWLjevqPoNgsPi_WNeFp7eFWVKMzkMenC8" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyqZ2pBtBbcZ7D-05InFmj9w2OxwA8VTYOowFt12zHnYKoQvs207b4l7U_8a6hXtgYeQlma0iA6jvtgR2zpINRZc3wLMuZsdXsAPU9T8dW4vbVgIkw" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEzbNAr70iUrAx2hYulgmJUpzFaas4t2kRKzugs-if4c99uybHMKjXWGTHhAJz3FrHSPbIML_7xfPrziUgC-ZZ8MCnI3cGR8WQ1ezmOmY8QuOU-mjvQ" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEzyGlUv3JRrLM6Km1G3iPRaEkCTeIQpFrAj-5gohUbALOJdlgTpLOKpLB7d9ifW99sjhaVsQvkcLnbVud62T33dDL1QymTGErvwS9qz27GvKktOlmI" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
</tr>
<!-- Stars icon End -->
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Stars and Social icon ends here-->
<!--Footer section Starts here-->
<tr>
<td class="padtop39" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
<tr>
<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
<tr>
<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExNKk5nG948RqtwkUsTo-WyWihjdvPgyJj54cIddep3XMJQrlXoRk3PHBDIXHd8l-ldo3m3loh3qPUtSO8fR7Po38lH-syyqx3Wldvz-5fVz7dM2jr2idFEN22kiBy8OgLP0AwWqbYbAj__FldREJKGFzrTH1sGRSiHUtceuDHZ-zHD7cJBCkiKGZfU" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEx8o5wiWanlF-pdwA8qRe1j4CMPl8TWar1iXSB9Oy4y1YyUGmv9vHn5OGJb8bSLK7KVq2rF8ykXPsWQyBQ8dy5wrNQXnhfzB0MIVXED8E1su3V9_Axoisaq3yDyLdR37RiJYMY2E0gJ6rZfMtwHhhKuQeAAqmljN1thNjhIsukGoFu43b8mnKR-Ab10rxO93Bg" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
</tr>
</table></td>
</tr>
<!-- Footer Logo Starts -->
<tr>
<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
<a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyNFp8W8mMLPdiHWzdDTidPYksblM5kVlXUG6wJb8CB-m-i6iLycgc6YgrZoi0_2qO9Or8" target="_blank" style="text-decoration: none;">
<img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="120" height="auto" class="width108" alt="" title="web.dev">
</a>
</td>
</tr>
<!-- Footer Logo ends -->
<!-- Address Starts -->
<tr>
<td class="pad0" align="center" valign="top" style="color:#757575; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:16px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2020 <a href="#" style="text-decoration: none; color: #757575;">Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA</a></td>
</tr>
<!-- Address Ends -->
</table>
</td>
</tr>
<!--Footer section ends here-->
</table></td>
</tr>
</table></td>
</tr>
</table>
<img height="1" width="3" src="https://www.google.com/appserve/mkt/proof/img/AD-FnEy_hK1BEPPEd0PnEkaxqekiKW-NTs9u16x6fANrJbvQukk.gif"></body>
</html>
